html, body {
    height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
    font-family: Comic Sans MS, Arial, Helvetica, sans-serif;
    background-image: url(bilder/Logo-Djembe-blass.gif);
}    
    
@media only screen and (max-width: 60em) {
   
        .bild-kleiner {
            width: 100%;
            height: auto;    
        }   
    
    }
    
    

#wrapper {
	display: flex;
    flex-direction: column;
	height: 100%;
	min-height: 100%;
    margin: 0 auto;
    max-width: 1000px;
}

header { 
	background-color: orange; 
        background-image: url(bilder/Logo-Djembe-blass_4_mit_Welle.gif);
        opacity: 0.8;
        min-height: 70px;
        font-size: 25px; /*2em; */
        font-style: italic;
        position: sticky;
        top: 0;
}

#mehrspaltig { 
    flex: 1; 
    display: flex; 
    flex-direction: row; 
    background-color: silver;
/*    max-height: 600px;*/
    max-width: 865px;
}

nav { 
    min-width: 132px;
    background-color: darkgray;
    background-image: url(bilder/sangban_stehend_engxxy90.jpg);
    text-align: center;  
}



#inhalte-index {     
     flex: 2;
     text-align: right;
}



article {
     flex: 1;
     background-image: url(bilder/Logo-Djembe-blass.gif);
     background-color: RGB(255,255,190);
     height: 100%;
     min-height: 100%; 
     padding: 10px;
     text-align: left;
}


aside {
     flex: 1;
     background-image: url(bilder/Logo-Djembe-blass.gif);
     background-color: RGB(255,255,190);
     height: 100%;
     min-height: 100%; 
     padding: 10px;
     text-align: left;
}



#inhalte-erklaerung-links {     
     flex: 1;
     color: green;
}

#inhalte-erklaerung-rechts {     
     flex: 1;
     padding: 5px; 
     color: brown;
}



#inhalte-fotos-bis-2005 {     
     flex: 1;
     background-image: url(bilder/Logo-Djembe-blass.gif);
     background-color: RGB(255,255,169);
     height: 100%;
     min-height: 100%; 
     padding: 10px;
     text-align: left;
}



figcaption { 
    font-size: 80%;
    text-align: center;
    font-style: italic;
}

.bildlinks {
    float: left;
    margin: 10px;
}

.bildrechts {
    float: right;
    margin: 10px;
}

.textgross {
    font-size: +1.5em;
   
}

/*unklar ob folgendes benutzt wird */
#textrechts {
    text-align: right;
   }


#textrot {
    color: red;
}


h1 {
    font-size: 1.4em;
    margin-bottom: 0em;
    margin-top: 0em; 
}

h2 {
    font-size: 1.2em;
    margin-bottom: 0em; 
    margin-top: 0em;
 }


h3 {
   font-size: 1.0em;
    margin-bottom: 0em;
    margin-top: 0em;
    }


#navi2 {
  text-align:left;
  margin-top:10px;
  margin-bottom:20px;
  margin-left:0px;
  margin-right:15px;
}

#navi2 ul {
  list-style:none;
}

#navi2 li {
  display:inline;  /*  ERSATZ FÜR: float:left; */
  margin-left:20px;
  font-size: 1.2em;
}


a:hover {
        color: red;
}


footer { 
/*    display: block;*/
    display: inline;
    background-color: silver;
    background-image: url(bilder/Logo-Djembe-blass_4_mit_Welle-180-Grad.gif);
    opacity: 0.5;
    min-height: 35px;
/*    text-align: left; */
}